<template>
  <div class="home">
    <hr>
    <h3 style="color:red;">测试watch监听</h3>
    <input type="text" v-model="name">


    <hr>
    <h3 style="color:red;">测试计算属性</h3>
    总价格为：(单价){{price}} * (数量)
    <button @click="numDec">-</button>
    {{num}}
    <button @click="num++">+</button>
     = {{total}}



    <hr>
    <button @click="n--">-</button>
     {{n}}
    <button @click="n++">+</button>
    <hr>
    <br>
    <button @click="next">点我换个人</button>
    <h3>欢迎：{{username}}</h3>
    <h3>电影名称：{{movie.title}}</h3>
    <h3>电影主演：{{movie.actors}}</h3>
    <h3>上映时间：{{movie.showingon}}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed, watch } from 'vue';
export default defineComponent({
  // 当组件创建时，自动调用该setup方法，完成数据的基本配置
  // setup方法return的对象中的数据，在template页面中可以直接使用
  setup(){
    // 声明变量，供页面使用
    let movie = reactive({
      title: '如果声音不记得',
      actors: ['亮哥', '鑫哥', '泡泡'],
      showingon: '2023-03-01'
    })
    let username = ref('华哥') 
    console.log(movie)
    // 声明方法，供页面使用
    let next = ()=>{
      // 访问ref代理对象的value属性，修改值的同时，更新UI
      username.value = '鑫鑫' 
      // 使用相同的方式，更新movie对象的内容
      movie.title = "这个杀手不太冷" 
      movie.actors = ['lion']
    }

    // 声明变量
    let n = ref(1)
    
    // 测试计算属性
    const num = ref(3)
    const price = ref(5.5)
    // 声明一个计算属性，对现有变量进行计算，返回结果
    const total = computed(()=>{
      return price.value * num.value
    })
    const numDec = function(){
      if(num.value>0){
        num.value--
      }
    }

    // watch监听，监听文本框中的输入
    const name = ref('')
    watch(name, (newval:string, oldval)=>{  // 监听name的变化
      console.log(newval)
      if(newval.length==6 && /^\d{6}$/.test(newval)){
        alert('验证通过')
      }
    })

    return {name, movie, username, next, n, price, num, total, numDec}
  }
});
</script>
